<template>
  <div>
    <div class="header_title">{{appName}}游戏推广地址</div>
    <div :class="appName === '277' ? 'game_introduce' : 'game_introduce_cat'" @click="gameIntroduce">{{appName}}游戏介绍</div>
    <div class="line"></div>
    <div class="content_box">
      <div class="title_item">推广链接已经生成，请选择推广链接的发送方式</div>
      <extension-share :appName="appName"/>
    </div>
  </div>
</template>

<script>
import { appName } from '../../assets/js/app';

import ExtensionShare from './childComps/ExtensionShare.vue'
  export default {
    created () {
      this.appName = appName();
    },
    data() {
      return {
        appName: null,
      }
    },
    components:{
        ExtensionShare
    },
    methods: {
      gameIntroduce() {
        this.$router.push('/game_introduce')
      },
    },
  }
</script>

<style scoped>
.header_title {
  font-size: 34px;
  width: 750px;
  height: 88px;
  background: #fff;
  text-align: center;
  line-height: 88px;
  color: #333333;
  font-weight: bold;
}

.game_introduce {
  font-size: 30px;
  color: #fff;
  margin: 20px auto 40px;
  width: 400px;
  height: 70px;
  border-radius: 35px;
  background: #2F41EB;
  font-weight: bold;
  text-align: center;
  line-height: 70px;
}

.game_introduce_cat {
  font-size: 30px;
  color: #fff;
  margin: 20px auto 40px;
  width: 400px;
  height: 70px;
  border-radius: 35px;
  background: linear-gradient(314deg,#ff5e39 10%, #ff8210 87%);
  font-weight: bold;
  text-align: center;
  line-height: 70px;
}

.line {
  width: 100%;
  height: 10px;
  background: #EFEFEF;
}

.content_box {
  padding: 0 35px;
}

.title_item {
  font-size: 26px;
  color: #999;
  line-height: 100px;
  border-bottom: 1px solid rgb(206, 206, 206);
}


</style>